<template>
  <div id="demo">
    <button v-on:click="show = !show">Toggle</button><br><br>
    <transition class="v-enter" name="slide-fade" :duration="5000" >
      <p class="fade" v-if="show">hello , Zuo Bufan is name you are well person,<br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero,<br>
           at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus. <br>
      </p>
    </transition>
     <!--方法实现渲染-->
      <h1 :class="['color']">{{getFullName() }}</h1>
      <!-- 计算属性实现渲染 -->
      <h1>{{fullName}}</h1> 
      <h1>{{totalPrice}}</h1> 
  </div>
</template>
<script>
export default {
   data(){
       return {
            show:true,
            active:true,
            firstName:'Zuo', // 定义变量
            lastName:'Bufan',
            books:[
              {name:'斗罗大陆',author:'zuobufan',price:188},
              {name:'斗罗大陆',author:'zuobufan',price:299},
              {name:'斗罗大陆',author:'zuobufan',price:299},
              {name:'斗罗大陆',author:'zuobufan',price:199},
              ]
       }
   },
   computed:{ //  计算属性
     fullName:function (){
       return this.firstName +' '+ this.lastName;
     },
     totalPrice:function() {
       var sum = 0;
       for(var i = 0;i<this.books.length;i++){
         sum = sum + this.books[i].price;
       }
       return sum;
     }
   },
   methods:{  //定义方法
     getFullName() {
       return this.firstName +' '+ this.lastName;
     }
   }
};
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.fade{
    display: block;
    border: 1px solid pink;
    width: 50%;
    height: 200px;
}
.active{
  background: #000;
  color: #fff;
}
.color{
  color: pink;
}
</style>


/* 
  beforeCreate  //创建初始化

  created //初始化

  beforeMount //挂载前

  mounted //完成挂载

  beforeUpdate 更新前

  updated 更新

  beforeDestory  销毁前

  destoryed 销毁

  v-once
  v-html
  v-cloack
  v-bind

 */

